<template>
    <div class="content">
        <div class="top"></div>
        <!-- -------------------------- -->
        <div class="map-top">
            <div class="item">
                <h4>全部SKU数量(个)</h4>
                <el-statistic :value="outputValue" />
            </div>
            <div class="item">
                <h4>动销SKU数量(个)</h4>
                <el-statistic :value="outputValue1" />
            </div>
            <div class="item">
                <h4>已合作平台商(个)</h4>
                <el-statistic :value="outputValue2" />
            </div>
            <div class="item">
                <h4>已合作品牌方(个)</h4>
                <el-statistic :value="outputValue3" />
            </div>
        </div>
        <!-- ------------------------ -->
        <!-- -----------11--------------------- -->
        <div class="goods all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="item">
                    <div class="progtit">
                        <img src="../../assets/images/vis-goods-tit1.png" alt="">
                        <s>全部SKU数量</s>
                        <span class="fzColor">20000 <b>(个)</b></span>
                    </div>
                    <el-progress :duration="50" :percentage="100" striped :show-text="false" striped-flow>
                    </el-progress>
                </div>
                <div class="item">
                    <div class="progtit">
                        <img src="../../assets/images/vis-goods-tit2.png" alt="">
                        <s>动销SKU数量</s>
                        <span class="fzColor">15000 <b>(个)</b></span>
                    </div>
                    <el-progress :text-inside="true" :duration="50" :percentage="75" striped striped-flow>
                        <span> </span>
                    </el-progress>
                </div>
            </div>
        </div>
        <!-- ---------22 -->
        <div class="classfy all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <ul class="right_box ">
                    <li class="fzColor" style="width: 30%;">商品类目</li>
                    <li class="fzColor" style="width: 30%;">排名</li>
                    <li class="fzColor" style="width: 30%;">数量</li>
                </ul>
                <ul>
                    <!-- singleHeight：单步运动停止的高度 -->
                    <vue3-seamless-scroll class="v-s-s" :list="towData" :hover="true" :step="0.2">
                        <!-- //隔行变色 -->
                        <div class="v-s-s_item" v-for="(item, index) in towData" :key="index"
                            :class="index % 2 === 0 ? 'even' : 'odd'">
                            <!-- //设置宽的目的为让内容居中显示 -->
                            <div style="width: 30%;">{{ item.name }}</div>
                            <div style="width: 30%;">{{ item.index }}</div>
                            <div style="width: 30%;">{{ item.numb }}</div>
                        </div>
                    </vue3-seamless-scroll>
                </ul>
            </div>
        </div>
        <!-- ----------------33 -->
        <div class="banner all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <ul class="right_box fzColor">
                    <li class="fzColor" style="width: 30%;">热销品牌</li>
                    <li class="fzColor" style="width: 30%;">合作SKU数量</li>
                    <li class="fzColor" style="width: 30%;">销售占比</li>
                </ul>
                <ul>
                    <!-- singleHeight：单步运动停止的高度 -->
                    <vue3-seamless-scroll class="v-s-s" :list="threeData" :hover="true" :step="0.3">
                        <!-- //隔行变色 -->
                        <div class="v-s-s_item" v-for="(item, index) in threeData" :key="index"
                            :class="index % 2 === 0 ? 'even' : 'odd'">
                            <!-- //设置宽的目的为让内容居中显示 -->
                            <div style="width: 30%;">{{ item.name }}</div>
                            <div style="width: 30%;">{{ item.numb }}</div>
                            <div style="width: 30%;">{{ item.index }}</div>
                        </div>
                    </vue3-seamless-scroll>
                </ul>
            </div>
        </div>
        <!-- -------------------44 -->
        <div class="replace all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="item">
                    <span class="left"></span>
                    <div class="text">
                        <span class="img">
                            <img src="../../assets/images/vis-daifa1.png" alt="">
                        </span>
                        <span class="num">当日订单 <b class="fzColor">268</b>件</span>
                    </div>
                    <span class="right"></span>
                </div>
                <div class="item">
                    <span class="left"></span>
                    <div class="text">
                        <span class="img">
                            <img src="../../assets/images/vis-daifa2.png" alt="">
                        </span>
                        <span class="num">30日订单 <b class="fzColor">4608</b>件</span>
                    </div>
                    <span class="right"></span>
                </div>
            </div>
        </div>
        <!-- 、------------------55 -->
        <div class="buying all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="buying_top">
                    <div class="item-t">
                        <div class="text">
                            <span class="img">
                                <img src="../../assets/images/vis-buying1.png" alt="">
                            </span>
                            <span class="num">当月销售 <b class="fzColor">9800</b>件</span>
                        </div>
                    </div>
                    <div class="item-t">
                        <div class="text">
                            <span class="img">
                                <img src="../../assets/images/vis-buying2.png" alt="">
                            </span>
                            <span class="num">当月数量 <b class="fzColor">5600</b>件</span>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="progtit">
                        <s>TOP 01 01项目</s>
                        <span>20000</span>
                    </div>
                    <el-progress :duration="50" :percentage="100" striped :show-text="false" striped-flow>
                    </el-progress>
                </div>
                <div class="item">
                    <div class="progtit">
                        <s>TOP 02 02项目</s>
                        <span class="fzColor">15000 </span>
                    </div>
                    <el-progress :text-inside="true" :duration="50" :percentage="75" striped striped-flow>
                        <span> </span>
                    </el-progress>
                </div>
                <div class="item">
                    <div class="progtit">
                        <s>TOP 03 03项目</s>
                        <span class="fzColor">15000 </span>
                    </div>
                    <el-progress :text-inside="true" :duration="50" :percentage="55" striped striped-flow>
                        <span></span>
                    </el-progress>
                </div>
                <div class="item">
                    <div class="progtit">
                        <s>TOP 04 04项目</s>
                        <span class="fzColor">15000 </span>
                    </div>
                    <el-progress :text-inside="true" :duration="50" :percentage="35" striped striped-flow>
                        <span></span>
                    </el-progress>
                </div>
            </div>
        </div>
        <!-- -------------------66 -->
        <div class="brand_user all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="item">
                    <p class="text">3600 <b>件</b></p>
                    <div class="image "></div>
                    <p class="bottm">合作品牌</p>
                </div>
                <div class="item">
                    <p class="text">3600 <b>件</b></p>
                    <div class="image"></div>
                    <p class="bottm">合作品牌</p>
                </div>
                <div class="item">
                    <p class="text">3600 <b>件</b></p>
                    <div class="image"></div>
                    <p class="bottm">合作品牌</p>
                </div>
            </div>
        </div>
        <!-- ----------77 -->
        <div class="user_lay all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="item">
                    <div class="inner">
                        <span>TOP 1</span>
                        <span>合肥市</span>
                        <span class="num fzColor">4520</span>
                    </div>
                </div>
                <div class="item">
                    <div class="inner">
                        <span>TOP 2</span>
                        <span>郑州市</span>
                        <span class="num fzColor">4520</span>
                    </div>
                </div>
                <div class="item">
                    <div class="inner">
                        <span>TOP 3</span>
                        <span>苏州市</span>
                        <span class="num fzColor">4520</span>
                    </div>
                </div>
                <div class="item">
                    <div class="inner">
                        <span>TOP 4</span>
                        <span>南京市</span>
                        <span class="num fzColor">4520</span>
                    </div>
                </div>
                <div class="item">
                    <div class="inner">
                        <span>TOP 5</span>
                        <span>六安市</span>
                        <span class="num fzColor">4520</span>
                    </div>
                </div>
            </div>
        </div>
        <!--------------------- 88 -->
        <div class="merchant all-box ">
            <div class="title">
                <img src="../../assets/images/Group 4114.png" class="tit_img" alt="">
            </div>
            <div class="box">
                <div class="radar-screen">
                    <div class="radar-center">
                        <p class="radar-number fzColor">{{ centerNumber }}</p>
                        <!-- <div></div> -->
                    </div>
                    <div class="radar-rings">
                        <div class="radar-ring " v-for="n in 5" :key="n" @mouseover="radarInnerFN(n)"
                            :style="{ opacity: numRadar == n ? 1 : 0.7, }"></div>
                        <div class="bor_dot">
                            <div class="dot" v-for="(n, index) in 4" :key="index"></div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <div class="item">
                        <b>银行</b>
                        <span class="fzColor">6000</span>
                    </div>
                    <div class="item">
                        <b>政企</b>
                        <span class="fzColor">4000</span>
                    </div>
                    <div class="item">
                        <b>航空</b>
                        <span class="fzColor">2000</span>
                    </div>

                </div>
            </div>
        </div>
        <div ref="charts" style=" width: 100vw; height: 100vh; 
            margin: 0 auto; margin-top: 5.7vh;
            transform: rotateX(25deg);"></div>
    </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import * as echarts from "echarts";
import china from "@/views/visualView/100000_full.json"
import { useTransition } from '@vueuse/core'

const mapData = china;
const centerNumber = ref(2560);
// 顶部数据
const topNumb = ref(0)
const topNumb1 = ref(0)
const topNumb2 = ref(0)
const topNumb3 = ref(0)
// const rings = ref(Array.from({ length: 5 }, (_, i) => i + 1)); // Create an array of 5 rings  
const outputValue = useTransition(topNumb, {
    duration: 1500,
})
const outputValue1 = useTransition(topNumb1, {
    duration: 1500,
})
const outputValue2 = useTransition(topNumb2, {
    duration: 1500,
})
const outputValue3 = useTransition(topNumb3, {
    duration: 1500,
})
onMounted(() => {
    // getCurrentInstance().refs.charts 获取charts节点对象
    const Instance = getCurrentInstance();
    const refCharts = Instance.refs.charts;
    const charts = echarts.init(refCharts);
    initCharts(charts);
    topNumb.value = 5620
    topNumb1.value = 452
    topNumb2.value = 396
    topNumb3.value = 842
});
// 地图配置
function initCharts(charts) {
    const option = {
        tooltip: {
            trigger: 'item'
        },

        geo: [
            {
                map: 'china',
                roam: true, // 是否允许缩放
                silent: false,
                zoom: 0.9,
                itemStyle: {
                    normal: {
                        areaColor: "rgba(73, 168, 208, 0)",
                        borderColor: 'rgba(34, 153, 211,1)',
                        // borderColor: 'rgba(255, 255, 255,1)',
                        borderWidth: 2,
                        // shadowOffsetY: 5,
                        // shadowColor: "rgba(0, 186, 255, 0.6)",
                    },
                    emphasis: {
                        areaColor: "#00BAFF",
                    },
                },
                zlevel: -1,

            },
            {
                map: 'china',
                roam: true, // 是否允许缩放
                silent: false,
                zoom: 0.901,
                itemStyle: {
                    normal: {
                        areaColor: "rgba(0, 186, 255, 0.5)",
                        shadowColor: "rgba(0, 186, 255, 0.6)",
                        // shadowColor: "rgba(255,255, 255,1)",
                        // shadowOffsetX: 5,
                        shadowOffsetY: 10,
                        borderColor: 'rgba(255,255, 255,0)',
                        borderWidth: 0,
                        // shadowBlur: 5
                    }
                },
                zlevel: -2,
                regions: [{
                    name: "南海诸岛",
                    itemStyle: {
                        // 隐藏地图
                        normal: {
                            opacity: 0, // 为 0 时不绘制该图形
                        }
                    },
                    label: {
                        show: false // 隐藏文字
                    }
                }],
            },
            {
                map: 'china',
                roam: true, // 是否允许缩放
                silent: false,
                zoom: 0.9,
                itemStyle: {
                    normal: {
                        areaColor: "rgba(0, 0, 0,0.5)",
                        borderColor: 'rgba(0, 186, 255,0)',
                        borderWidth: 2,
                        shadowColor: "rgba(0, 0, 0,0.8)",
                        shadowOffsetY: 25,
                        shadowOffsetX: -5,
                    },
                    // emphasis: {
                    //     areaColor: "#00BAFF",
                    // },
                },
                zlevel: -3,
                regions: [{
                    name: "南海诸岛",
                    itemStyle: {
                        normal: {
                            opacity: 0, // 为 0 时不绘制该图形
                        }
                    },
                    label: {
                        show: false // 隐藏文字
                    }
                }],
            },

        ],
        series: [
            {
                name: "热力图",
                type: "heatmap",
                coordinateSystem: "geo",
                data: [{
                    value: [107.38, 23.19, 120]
                },
                {
                    value: [111, 37.86, 40]
                },
                {
                    value: [114, 34.86, 40]
                },
                {
                    value: [113, 35.86, 40]
                },
                {
                    value: [110, 38.86, 40]
                },
                {
                    value: [112, 39.86, 40]
                },
                ],
                label: {
                    normal: {
                        show: false // 不显示省份标签  
                    },
                    emphasis: {
                        show: false // 高亮时不显示标签  
                    }
                },
                itemStyle: {
                    normal: {
                        borderColor: '#333', // 设置轮廓颜色  
                        borderWidth: 1, // 设置轮廓线宽  
                        areaColor: 'rgba(0,0,0,0)', // 设置填充颜色为透明，以只显示轮廓  
                    },
                    emphasis: {
                        borderColor: '#333', // 高亮时轮廓颜色  
                        borderWidth: 1
                    }
                }
            },
        ],
        visualMap: [
            {
                // 地图组件映射
                show: false,
                min: 0,
                max: 20,
                splitNumber: 10,

                inRange: {  // 定义 在选中范围中 的视觉元素。
                    color: ['#d94e5d', '#eac736', '#50a3ba'].reverse()
                },

                textStyle: {
                    color: '#fff',
                    fontWeight: '400',
                    fontSize: '12'
                }
            },
        ],

    };
    // 地图注册，第一个参数的名字必须和option.geo.map一致
    echarts.registerMap("china", /**/ mapData);
    charts.setOption(option);
}
// 雷达图
const numRadar = ref()
function radarInnerFN(n) {
    // console.log(n);
    numRadar.value = n
}

// 向上滚动-
const towData = ref(
    [
        { name: '家居', numb: '2200', index: "TOP 01" },
        { name: '家居', numb: '2100', index: "TOP 02" },
        { name: '家居', numb: '2000', index: "TOP 03" },
        { name: '家居', numb: '1900 ', index: "TOP 04" },
        { name: '家居', numb: '1800 ', index: "TOP 05" },
        { name: '家居', numb: '1700 ', index: "TOP 06" },
        { name: '家居', numb: '1600 ', index: "TOP 07" },
        { name: '家居', numb: '1500 ', index: "TOP 08" },
        { name: '家居', numb: '1400 ', index: "TOP 09" },
        { name: '家居', numb: '1400 ', index: "TOP 10" },
    ]
)
const threeData = ref(
    [
        { name: '图书', numb: '2200', index: "55%" },
        { name: '图书', numb: '2100', index: "55%" },
        { name: '图书', numb: '2000', index: "55%" },
        { name: '图书', numb: '1900 ', index: "55%" },
        { name: '图书', numb: '1800 ', index: "55%" },
        { name: '图书', numb: '1700 ', index: "55%" },
        { name: '图书', numb: '1600 ', index: "55%" },
        { name: '图书', numb: '1500 ', index: "55%" },
        { name: '图书', numb: '1400 ', index: "55%" },
        { name: '图书', numb: '1400 ', index: "55%" },
    ]
)

</script>
<style scoped lang="scss">
@import "@/assets/base.scss";

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes tranLY {
    0% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 30%);
    }

    100% {
        transform: translate(-50%, 0);
    }
}

@keyframes opcitY {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.3;
    }
}


.anm_rotate {
    animation: rotate 3s;
}

.content {
    padding: 0 1vw;
    background-color: #06080C;
    height: 100vh;
    background-image: url('../../assets/images/alllbgc_city.png');
    background-repeat: no-repeat;
    background-position: center 4vw;
    background-size: 100%;
    overflow: hidden;

    // 头部标题
    .top {
        background-image: url('../../assets/images/size-top.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 6vw;
        width: 100%;
        height: 6vw;
        position: absolute;
        left: 0;
    }

    // 商品信息
    .map-top {
        position: absolute;
        display: flex;
        width: 50%;
        left: 28%;
        top: 6.8vw;

        .item {
            width: 8.6vw;
            height: 3.6vw;
            text-align: center;
            margin-right: 0.3vw;
            background-size: 100% 3.6vw;

            .el-statistic {
                font-size: 1vw;
                font-weight: 700;

                ::v-deep .el-statistic__number {
                    color: #d1eeff;
                    text-shadow: 0vw 0.4vw 0.8vw #fff;
                }
            }

            &:nth-child(1) {
                background-image: url('../../assets/images/map-top1.png');
                border-left: #40DDFD 0.3vw solid;
                background-repeat: no-repeat;
            }

            &:nth-child(2) {
                background-image: url('../../assets/images/map-top2.png');
                border-left: #40DDFD 0.3vw solid;
            }

            &:nth-child(3) {
                background-image: url('../../assets/images/map-top3.png');
                border-left: #40DDFD 0.3vw solid;
            }

            &:nth-child(4) {
                background-image: url('../../assets/images/map-top4.png');
                border-left: #40DDFD 0.3vw solid;
            }

            h4 {
                font-size: $title-font-size6;
                color: #fff;
            }

            span {
                color: #fff;
                font-weight: 700;
                font-size: $title-font-size4;
            }
        }
    }

    // 标题
    .title {
        width: 22.4vw;
        height: 2.6vw;
        background-size: 100% 2.6vw;
        // padding-left: 0.5vw;

        .tit_img {
            margin: 0.5vw 0 0 0.5vw;
            transform-origin: center center;
            animation: rotate 15s infinite;
        }
    }

    // 公共的
    .all-box {
        position: absolute;
        color: #fff;
    }

    .fzColor {
        color: #d1eeff;
        text-shadow: 0vw 0.4vw 0.8vw #fff;
    }

    // 1
    .goods {
        top: 12%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc.png');
        }

        .box {
            width: 22.4vw;
            height: 11vw;

            .item {
                width: 85%;
                margin: 0 auto;
                margin-top: 0.8vw;

                .progtit {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 0.5vw;


                    img {
                        width: 1.2vw;
                        height: 1.5vw;
                    }

                    s {
                        flex: 1;
                        font-size: $title-font-size7;
                        margin-left: 1vw;
                        text-decoration: none;
                    }

                    span {
                        font-size: $title-font-size8;
                        font-weight: 700;

                        b {
                            font-size: $title-font-size7;
                        }
                    }
                }

                // 进度条
                .el-progress {
                    ::v-deep .el-progress-bar {
                        .el-progress-bar__outer {
                            height: 0.5vw !important;
                            background-color: rgba($color: #fff, $alpha: 0.2);

                            .el-progress-bar__inner {
                                height: 0.5vw;
                                background-color: rgba($color: #1B7EF2, $alpha: 0.8);

                            }
                        }
                    }
                }
            }
        }
    }

    // 2
    .classfy {
        top: 38%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc2.png');
        }

        .box {
            width: 22.4vw;
            font-size: $title-font-size7;
            display: flex;
            flex-direction: column;
            align-items: center;
            // padding: 0.2vw;
            background-color: rgba($color: #394b6e, $alpha: 0.2);
            // background-color: #06080C;

            .right_box {
                border: #1E7BD6 solid 0.1vw;
                background: linear-gradient(transparent, #114BA0);
                width: 22.4vw;
                height: 3vh;
                line-height: 3vh;
                display: flex;
                overflow: hidden;
                justify-content: space-between;
                text-align: center;
                font-size: $title-font-size5;

                li {
                    font-weight: 700;
                }
            }

            // 滚动代码 
            .v-s-s {
                width: 22vw;
                height: 23vh;
                overflow: hidden;
                text-align: center;
                color: aliceblue;

                .v-s-s_item {
                    width: 22vw;
                    height: 2.8vh;
                    line-height: 2.8vh;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    flex-direction: row;
                    font-size: $title-font-size7 ;
                }
            }

            //隔行变色
            .even {
                color: #66b3ff;
                // background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%,
                //         transparent 0, transparent 50%, rgba(255, 255, 255, 0.2) 0,
                //         rgba(255, 255, 255, 0.2) 75%, transparent 0, transparent);
                // background-size: 1.25em 1.25em;
            }
        }
    }

    // 3
    .banner {
        top: 70%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc3.png');
        }

        .box {
            font-size: $title-font-size7;
            width: 22.4vw;
            background-color: rgba($color: #394b6e, $alpha: 0.2);

            .right_box {
                border: #1E7BD6 solid 0.1vw;
                background: linear-gradient(transparent, #114BA0);
                width: 22.4vw;
                height: 3vh;
                line-height: 3vh;
                display: flex;
                justify-content: space-between;
                text-align: center;
                font-size: $title-font-size5;
                overflow: hidden;

                li {
                    font-weight: 700;
                }
            }

            // 滚动代码 
            .v-s-s {
                width: 22vw;
                height: 20vh;
                overflow: hidden;
                text-align: center;
                color: aliceblue;

                .v-s-s_item {
                    width: 22vw;
                    height: 2.8vh;
                    line-height: 2.8vh;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    text-align: center;
                    flex-direction: row;
                    font-size: $title-font-size7 ;

                }
            }

            //隔行变色
            .even {
                color: #66b3ff;
                // background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%,
                //         transparent 0, transparent 50%, rgba(255, 255, 255, 0.2) 0,
                //         rgba(255, 255, 255, 0.2) 75%, transparent 0, transparent);
                // background-size: 1.25em 1.25em;
            }
        }
    }

    // 4
    .replace {
        top: 70%;
        left: 25%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc4.png');
        }

        .box {
            width: 22.4vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5vw;

            .item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                height: 3.85vw;
                margin-top: 0.4vw;
                // background-color: #000;

                .right,
                .left {
                    width: 1vw;
                    height: 100%;
                    background-repeat: no-repeat;
                    background-size: 100% 100%;
                    background-position: left top;
                    flex-shrink: 0;
                }

                .left {
                    background-image: url('../../assets/images/left-rep.png');
                }

                .right {
                    background-image: url('../../assets/images/right-rep.png');
                }

                .text {
                    flex: 1;
                    height: 3.25vw;
                    display: flex;

                    .img {
                        display: inline-block;
                        width: 3.45vw;
                        height: 3.45vw;
                        padding: 0.16vw;
                        margin-right: 0.12vw;
                        border: rgba(0, 213, 255, 0) solid 0.2vw;
                        overflow: hidden;
                        position: relative;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &::before {
                            content: '';
                            position: absolute;
                            left: -50%;
                            top: -50%;
                            width: 200%;
                            height: 200%;
                            background-repeat: no-repeat;
                            background-position: 0 0;
                            background-image: conic-gradient(transparent, #8ed4ff, transparent 40%);
                            animation: rotate 3s linear 1s infinite;
                            z-index: 0;

                        }

                        img {
                            width: 2.6vw;
                            height: 2.6vw;
                            position: absolute;
                            z-index: 1;

                        }
                    }


                    .num {
                        flex: 1;
                        display: inline-block;
                        height: 100%;
                        background: linear-gradient(to right, #1170DD, transparent);
                        line-height: 3.25vw;
                        padding: 0 0.5vw;
                    }
                }

            }
        }
    }

    // 5
    .buying {
        top: 70%;
        left: 49%;
        z-index: 99999;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc5.png');
        }

        .box {
            .buying_top {
                display: flex;
                margin: 0.5vw 0;

                .item-t {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    width: 100%;
                    height: 2.85vw;

                    .text {
                        flex: 1;
                        height: 2.62vw;
                        display: flex;

                        .img {
                            display: inline-block;
                            width: 2.82vw;
                            height: 2.82vw;
                            padding: 0.16vw;
                            margin-right: 0.12vw;
                            border: rgba(0, 213, 255, 0) solid 0.2vw;
                            overflow: hidden;
                            position: relative;
                            display: flex;
                            align-items: center;
                            justify-content: center;

                            &::before {
                                content: '';
                                position: absolute;
                                left: -50%;
                                top: -50%;
                                width: 200%;
                                height: 200%;
                                background-repeat: no-repeat;
                                background-position: 0 0;
                                background-image: conic-gradient(transparent, #8ed4ff, transparent 40%);
                                animation: rotate 2s linear 2s infinite;
                                z-index: 0;

                            }

                            img {
                                width: 2.3vw;
                                height: 2.3vw;
                                position: absolute;
                                z-index: 1;

                            }
                        }

                        .num {
                            flex: 1;
                            display: inline-block;
                            height: 100%;
                            background: linear-gradient(to right, #09253e, transparent);
                            line-height: 2.62vw;
                            padding: 0 0.5vw;
                            font-size: $title-font-size6;

                            b {
                                font-weight: 700;
                            }
                        }
                    }

                }
            }

            .item {
                width: 85%;
                margin: 0 auto;
                margin-bottom: 0.3vw;

                .progtit {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 0.05vw;

                    s {
                        flex: 1;
                        font-size: $title-font-size7;
                        margin-left: 1vw;
                        text-decoration: none;
                    }

                    span {
                        font-size: $title-font-size7;
                        font-weight: 700;
                    }
                }

                // 进度条
                .el-progress {
                    ::v-deep .el-progress-bar {
                        .el-progress-bar__outer {
                            height: 0.3vw !important;
                            background-color: rgba($color: #fff, $alpha: 0.2);

                            .el-progress-bar__inner {
                                height: 0.3vw;
                                background-color: rgba($color: #1B7EF2, $alpha: 0.8);
                            }
                        }
                    }
                }

                &:nth-child(2) {
                    color: #00D3FD;

                    // 进度条
                    .el-progress {
                        ::v-deep .el-progress-bar {
                            .el-progress-bar__outer {
                                .el-progress-bar__inner {
                                    // background-color: rgba($color: #00D5FF, $alpha: 0.8) !important;
                                    background-color: #00D5FF !important;
                                }
                            }
                        }
                    }
                }

            }
        }
    }

    // 6
    .brand_user {
        top: 70%;
        right: 1%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc6.png');
        }

        .box {
            display: flex;
            align-items: center;
            justify-content: space-evenly;

            .item {
                margin-top: 2.6vw;
                position: relative;
                text-align: center;
                font-size: $title-font-size5;

                &:nth-child(1) {
                    .text {
                        animation: tranLY 3s infinite;
                    }
                }

                &:nth-child(2) {
                    .text {
                        animation: tranLY 3s infinite 0.2s;
                    }
                }

                &:nth-child(3) {
                    .text {
                        animation: tranLY 3s infinite 0.4s;
                    }
                }

                .text {
                    position: absolute;
                    left: 50%;
                    transform: translateX(-50%);
                    font-size: $title-font-size6;
                    font-weight: 700;
                    width: 6.4vw;

                    b {
                        font-size: $title-font-size7;
                    }
                }

                .image {
                    width: 6.4vw;
                    height: 6vw;
                    background-image: url('../../assets/images/brand_user1.png');
                    background-size: 100%;
                }

                .bottm {
                    margin-top: 0.8vw;
                }
            }




        }
    }

    // 7
    .user_lay {
        top: 38%;
        right: 1%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc7.png');
        }

        .box {
            position: relative;
            height: 26vh;

            .item {
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                border: rgba(0, 213, 255, 0.2) solid 0.2vw;
                overflow: hidden;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    left: -50%;
                    top: -50%;
                    width: 200%;
                    height: 200%;
                    background-repeat: no-repeat;
                    background-position: 0 0;
                    background-image: conic-gradient(transparent, #787878, transparent 40%);
                    animation: rotate 4s linear infinite;
                    z-index: 0;
                }

                .inner {
                    border-radius: 50%;
                    background-repeat: no-repeat;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    font-size: $title-font-size7;
                    justify-content: center;
                    z-index: 1;

                    .num {
                        font-size: $title-font-size6;
                        font-weight: 700;
                        margin-top: 0.6vw;
                    }
                }

                &:nth-child(1) {
                    position: absolute;
                    left: 30%;
                    bottom: 30%;
                    width: 6.56vw;
                    height: 6.56vw;

                    &::before {
                        animation: rotate 6s linear 0.2s infinite;
                    }

                    .inner {
                        width: 6.56vw;
                        height: 6.56vw;
                        background-image: url('../../assets/images/user_lay1.png');
                        background-size: 7vw;
                        background-position: -0.6vw -1.7vw;
                    }
                }

                &:nth-child(2) {
                    position: absolute;
                    right: 3%;
                    top: 3%;
                    width: 6.56vw;
                    height: 6.56vw;
                    transform: scale(0.9);

                    &::before {
                        animation: rotate 4s linear 1s infinite;
                    }

                    .inner {
                        width: 6.56vw;
                        height: 6.56vw;
                        background-image: url('../../assets/images/user_lay2.png');
                        background-size: 7vw;
                        background-position: -0.6vw -1.7vw;
                    }
                }

                &:nth-child(3) {
                    position: absolute;
                    left: 3%;
                    bottom: 0;
                    width: 6.56vw;
                    height: 6.56vw;
                    transform: scale(0.8);

                    &::before {
                        animation: rotate 5s linear 1.5s infinite;
                    }

                    .inner {
                        width: 6.56vw;
                        height: 6.56vw;
                        background-image: url('../../assets/images/user_lay3.png');
                        background-size: 7.4vw;
                        background-position: -1vw -2vw;
                    }
                }

                &:nth-child(4) {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 6.56vw;
                    height: 6.56vw;
                    transform: scale(0.75);

                    .inner {
                        width: 6.56vw;
                        height: 6.56vw;
                        background-image: url('../../assets/images/user_lay4.png');
                        background-size: 6.8vw;
                        background-position: -0.2vw -0.18vw;
                    }
                }

                &:nth-child(5) {
                    position: absolute;
                    right: 15%;
                    bottom: 0;
                    width: 6.56vw;
                    height: 6.56vw;
                    transform: scale(0.7);

                    .inner {
                        width: 6.56vw;
                        height: 6.56vw;
                        background-image: url('../../assets/images/user_lay5.png');
                        background-size: 7.8vw;
                        background-position: -1.4vw -2.4vw;
                    }
                }
            }

        }
    }

    // 8
    .merchant {
        top: 12%;
        right: 1%;

        .title {
            background-image: url('../../assets/images/visual-tit-bgc8.png');
        }

        .box {
            display: flex;
            align-items: center;
            padding: 0.8vh 0.5vw;

            .radar-screen {
                width: 9vw;
                height: 9vw;
                border-radius: 50%;
                background-color: rgba($color: #000, $alpha: 0.5);
                position: relative;
                overflow: hidden;

                .radar-center {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    text-align: center;


                    .radar-number {
                        font-size: 0.64vw;
                        margin-bottom: 0.2vw;
                    }

                    // div {
                    //     width: 0.4vw;
                    //     height: 0.4vw;
                    //     border-radius: 50%;
                    //     display: flex;
                    //     align-items: center;
                    //     justify-content: center;
                    //     box-shadow: 0px 0 0.2vw 0.1vw #fff;

                    //     &::after {
                    //         display: inline-block;
                    //         content: '';
                    //         width: 0.25vw;
                    //         height: 0.25vw;
                    //         background-color: #fff;
                    //         border-radius: 50%;
                    //     }
                    // }

                }

                .radar-rings {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;

                    .radar-ring {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                        position: absolute;
                        box-sizing: border-box;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        border: 0.3vw solid rgba(255, 255, 255, 0.2);
                        z-index: 1;

                        &:nth-child(2) {
                            width: 7.5vw;
                            height: 7.5vw;
                            border-radius: 50%;
                            border: 0.3vw solid rgba(255, 255, 255, 0.2);
                        }

                        &:nth-child(3) {
                            width: 6vw;
                            height: 6vw;
                            border-radius: 50%;
                            border: 0.3vw solid #00B2FF;
                        }

                        &:nth-child(4) {
                            width: 4.5vw;
                            height: 4.5vw;
                            border-radius: 50%;
                            border: 0.3vw solid #77ADFF;
                        }

                        &:nth-child(5) {
                            width: 3vw;
                            height: 3vw;
                            border-radius: 50%;
                            border: 0.3vw solid #00F0FF;
                        }
                    }

                    .bor_dot {
                        width: 100%;
                        height: 1px;
                        position: absolute;
                        box-sizing: border-box;
                        top: 50%;
                        left: 50%;

                        .dot {
                            border-top: 0.2vw dotted rgba(255, 255, 255, 0.15);
                            // transform-origin: 50% 50%;
                            width: 100%;
                        }

                        .dot:nth-child(1) {
                            transform: translate(-50%, -50%) rotate(0deg);
                            transform-origin: 50% 50%;
                        }

                        .dot:nth-child(2) {
                            transform: translate(-50%, -50%) rotate(45deg);
                            transform-origin: 50% 50%;
                        }

                        .dot:nth-child(3) {
                            transform: translate(-50%, -50%) rotate(90deg);
                            transform-origin: 50% 50%;
                        }

                        .dot:nth-child(4) {
                            transform: translate(-50%, -50%) rotate(135deg);
                            transform-origin: 50% 50%;
                        }
                    }
                }

            }

            .list {
                margin-left: 0.5vw;

                .item {
                    width: 7.14vw;
                    height: 1.56vw;
                    margin-bottom: 0.2vw;
                    padding: 0 0.3vw;
                    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.2), transparent);
                    display: flex;
                    align-items: center;

                    b {
                        flex: 1;
                        font-size: $title-font-size5;
                        text-align: center;
                    }

                    span {
                        font-size: $title-font-size6;
                        font-weight: 700;
                    }

                    &::before {
                        content: '';
                        display: inline-block;
                        width: 0.8vw;
                        height: 0.8vw;
                        background-color: #fff;
                    }

                    &:nth-child(1) {
                        &::before {
                            background-color: #00B2FF;
                        }
                    }

                    &:nth-child(2) {
                        &::before {
                            background-color: #77ADFF;
                        }
                    }

                    &:nth-child(3) {
                        &::before {
                            background-color: #00F0FF;
                        }
                    }
                }
            }

        }
    }
}
</style>